<!DOCTYPE html>
<html lang="zh-CN">
<!--告诉浏览器语言类型-->

<head>
    <meta charset="UTF-8">
    <!--定义字符集编码类型-->
    <title>网页标题</title>
    <link rel="icon" href="./media_resourcing/title_logo.ico" type="images/x-ico"/>
    <!--设置标题网页logo-->
    <link rel="stylesheet" href="./ext_style.css">
</head>

<body>
<div class="header w">
    <div class="logo">
        <a href="http://www.bilibili.com"><img src="../media_resourcing/Microsoft.jpg" alt="啊呀,出了点问题,o(╥﹏╥)o"
                                               title="o(=•ェ•=)m" width="300px" height="66px"></a>
    </div>
    <ul>
        <li><a href="http://www.jandan.com">摸鱼</a></li>
        <li><a href="http://www.zhihu.com">摸鱼BBBBBBBBBBBBB</a></li>
        <li><a href="http://www.ithome.com">摸鱼C</a></li>
    </ul>
    <div class="search">
        <input type="text" value="百度一下 你就知道">
        <button></button>
        <!-- 制作一个文本搜索框 -->
        <!-- 行内块元素和行内块元素进行并排显示的时候会有中间缝隙,所以即使两个width总长度和容器一致,也会撑大盒子或者使布局异常显示 -->
    </div>
</div>
<!--header界面结束-->
<div class="background-color">
    <div class="banner">
        <div class="hz1">
            <ul>
                <li><a href="#">项目1<span>&gt;</span></a></li>
                <li><a href="#">项目2<span>&gt;</span></a></li>
                <li><a href="#">项目3<span>&gt;</span></a></li>
                <li><a href="#">项目4<span>&gt;</span></a></li>
                <li><a href="#">项目5<span>&gt;</span></a></li>
                <li><a href="#">项目6<span>&gt;</span></a></li>
            </ul>
        </div>
<!--    course 模块-->
        <div class="course">
            <h1>我的课程</h1>
            <div class="course_1">
                <ul>
                    <li>
                        <h4>课程一</h4>
                        <p>课程一描述</p>
                    </li>
                    <li>
                        <h4>课程二</h4>
                        <p>课程二描述</p>
                    </li>
                </ul>
                <a href="#" class="more">我的课程</a>
            </div>
        </div>
    </div>
</div>
<!--    商品 模块-->

<div class="goods w">
<h3><a href="#">精品推荐</a></h3>
    <ul>
        <li><a href="#">精品一</a></li>
        <li><a href="#">精品二</a></li>
        <li><a href="#">精品三</a></li>
    </ul>
<a href="#" class="mod">修改</a>
</div>
</body>

</html>